<template>
	<view>
		<f-navbar title="消防技术服务（监管）" :iconLeft="false" />
		<supervise-home ref="home" @companyClick="companyClick" @reportClick="reportClick" v-if="tabberIndex == 0" />
		<supervise-unit :unitParams.sync="unitParams" :maintenanceParams.sync="maintenanceParams"
			@handleScroll="handleScroll" @handlepageScrollTo="handlepageScrollTo" ref="unit" v-if="tabberIndex == 1" />
		<supervise-check ref="check" @handleScroll="handleScroll" v-if="tabberIndex == 2" />
		<supervise-report :maintenanceParams.sync="maintenanceParams" @handleScroll="handleScroll" ref="report"
			v-if="tabberIndex == 3" />
		<supervise-personal ref="personal" v-if="tabberIndex == 4" />
		<f-tabber />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import superviseHome from './home/Home.vue';
	import superviseUnit from './unit/Unit.vue';
	import superviseCheck from './check/Check.vue';
	import superviseReport from './report/Report.vue';
	import supervisePersonal from './personal/Personal.vue';
	export default {
		name: 'Supervise',
		components: {
			superviseHome,
			superviseUnit,
			superviseCheck,
			superviseReport,
			supervisePersonal
		},
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				scrollTop: null, // 距离顶部的距离
				unitParams: '', // 社会单位
				maintenanceParams: '', // 维保情况
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
			this.scrollTop = e.scrollTop // 记录当前的位置
		},
		// 页面关闭清空滚动距离
		onUnload() {
			uni.setStorageSync('scrollVal', 0)
		},
		computed: {
			// 导航栏当前点击的index
			...mapState({
				tabberIndex: modules => modules.tabber.tabberIndex
			})
		},
		watch: {
			tabberIndex: {
				handler(newVal) {
					this.$nextTick(() => {
						this.unitParams = '' // 清空社会单位值
						this.maintenanceParams = '' // 清空维保情况值
						if (newVal == 0) {
							this.$refs.home.showLoading();
							return;
						}
						if (newVal == 1) {
							this.$refs.unit.showLoading();
							this.$nextTick(() => {
								uni.pageScrollTo({
									scrollTop: uni.getStorageSync('scrollVal'),
									duration: 2500
								});
							})
							return;
						}
						if (newVal == 2) {
							this.$refs.check.showLoading();
							this.$nextTick(() => {
								uni.pageScrollTo({
									scrollTop: uni.getStorageSync('scrollVal'),
									duration: 2500
								});
							})
							return;
						}
						if (newVal == 3) {
							this.$refs.report.showLoading();
							return;
						}
						if (newVal == 4) {
							this.$refs.personal.showLoading();
							return;
						}
					})
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			this.tabberSupervise() // 给导航栏赋值
		},
		onShow() {
			uni.hideHomeButton(); // 隐藏小房子
			if (this.tabberIndex == 0) {
				this.$refs.home.downLoading();
				return;
			}
			if (this.tabberIndex == 1) {
				this.$refs.unit.downLoading();
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: uni.getStorageSync('scrollVal'),
						duration: 2500
					});
				})
				return;
			}
			if (this.tabberIndex == 2) {
				this.$refs.check.downLoading();
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: uni.getStorageSync('scrollVal'),
						duration: 2500
					});
				})
				return;
			}
			if (this.tabberIndex == 3) {
				this.$refs.report.downLoading();
				return;
			}
			if (this.tabberIndex == 4) {
				this.$refs.personal.downLoading();
				return;
			}
		},
		// 上拉加载
		onReachBottom() {
			if (this.tabberIndex == 1) {
				this.$refs.unit.pullLoading();
				return;
			}
			if (this.tabberIndex == 2) {
				this.$refs.check.pullLoading();
				return;
			}
			if (this.tabberIndex == 3) {
				this.$refs.report.pullLoading();
				return;
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// console.log('this.tabberIndex', this.tabberIndex)
			if (this.tabberIndex == 0) {
				this.$refs.home.downLoading();
				return;
			}
			if (this.tabberIndex == 1) {
				this.$refs.unit.downLoading();
				return;
			}
			if (this.tabberIndex == 2) {
				this.$refs.check.downLoading();
				return;
			}
			if (this.tabberIndex == 3) {
				this.$refs.report.downLoading();
				return;
			}
			if (this.tabberIndex == 4) {
				this.$refs.personal.downLoading();
				return;
			}
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			...mapActions(['tabberSupervise']),
			// 返回首页
			goBack() {
				this.changeTabberIndex(0) // 底部导航栏Index默认为0
				this.$pageJump.reLaunch('/pages/homeCentral/Central');
			},
			// 项目列表点击进入详情---返回的时候记录的项目的位置
			handleScroll() {
				uni.setStorageSync('scrollVal', this.scrollTop)
			},
			// 切换类型的时候 ---回到顶部
			handlepageScrollTo() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1000
				});
			},
			// 跳转到单位页面
			companyClick(txt) {
				this.unitParams = txt
				this.changeTabberIndex(1) // 底部导航栏Index默认为0
			},
			// 跳转到报告书页面
			reportClick(txt) {
				this.maintenanceParams = txt
				if (txt == '本月未维保' || txt == '本月已维保') {
					this.changeTabberIndex(1) // 底部导航栏Index默认为0
				} else {
					this.changeTabberIndex(3) // 底部导航栏Index默认为0
				}

			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-badge--bg--error {
		right: 34% !important;
	}

	/deep/.u-btn--default {
		color: #bcbfcc !important;
		border-color: #bcbfcc !important;
	}

	/deep/ .u-drawer-bottom {
		background-color: #f5f5f5 !important;
	}

	// /deep/.u-dropdown__content__mask {
	// 	background: transparent !important;
	// }

	// /deep/.u-subsection {
	// 	border-radius: 15rpx !important;
	// }

	/deep/.u-back-top {
		z-index: 999999 !important;
	}

	/* 调整清除按钮的样式，例如右移20px */
	/deep/.check-top-search .u-close-wrap {
		margin-right: 110px !important;
	}
</style>